<template>
	<view class="content" :style="{'height': windowHeight + 'px'}">
		<!-- 输入框 -->
		<view class="input unify-radius unify-margin">
			<textarea class="input-textarea" :value="inputValue" :placeholder="placeholder"
				placeholder-style="color: #999999" @input="getInput" />
		</view>

		<!-- 间隔 -->
		<uni-interval height="10px"></uni-interval>

		<!-- 按钮 -->
		<view class="save-btn unify-margin unify-float-collapse" @tap="tapSave">完成</view>

		<!-- 间隔 -->
		<uni-interval height="30px"></uni-interval>

		<!-- 快捷标签 -->
		<view class="shortcut unify-margin">
			<!-- 标题 -->
			<view class="shortcut-title unify-flex">
				快捷标签
			</view>

			<!-- 列表 -->
			<view class="shortcut-list unify-flex">
				<view class="shortcut-item" v-for="(item,index) in labelList" :key="index" @tap="tapLabel(item)">
					{{item}}
				</view>
			</view>
		</view>

		<!-- 自定义模态框 -->
		<uni-show-modal :show="show"></uni-show-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0,
				placeholder: this.$mConstDataConfig.affirmOrderMenu.from2[0].placeholder,
				inputValue: '',
				labelList: ["不吃辣", "少放辣", "多放辣", "不吃蒜", "不吃葱", "不吃香菜"],
				show: false
			}
		},
		onLoad(options) {
			let query;
			query = this.$mUtils.jsonParse(options.query, 1);
			this.inputValue = query.data;
			if(this.inputValue) {
				this.updateLabelArray()
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight;
				}
			})
		},
		methods: {
			// 获取input值
			getInput(e) {
				this.inputValue = e.detail.value;
			},

			// 点击标签
			tapLabel(e) {
				if (this.inputValue.length <= 50) {
					this.inputValue += (this.inputValue.length > 0 ? '，' : '') + e;
				} else {
					this.$mHelper.toast('最多50个字哦~')
					return
				}
			},

			// 完成
			tapSave() {
				let pages, beforePage;
				pages = getCurrentPages()	// 获取页面栈
				beforePage = pages[pages.length - 2];	// 获取上个页面的实例对象
				if(beforePage) {
					beforePage.affirmOrderMenu.from2.forEach((item, index) => {
						switch(index) {
							case 0:
								item.value = this.inputValue;
								break
							default:
								break
						}
					})
				}
				this.$mUtils.overBack()
			},
			
			// 更新标签数组
			updateLabelArray() {
				let value = this.inputValue;
				if(value) {
					let index = this.labelList.findIndex(item => {
						if(value === item) {
							return true
						}
					})
					this.labelList.splice(index, 1)
					this.labelList.unshift(value)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: $uni-bg-color;
	}

	// 输入框
	.input {
		height: 200rpx;
		background-color: rgba($color: #000000, $alpha: 0.03);
		padding: 20rpx 30rpx;
	}

	.input-textarea {
		width: 100%;
		height: inherit;
		font-size: $uni-font-size-sm;
	}

	// 按钮
	.save-btn {
		width: max-content;
		line-height: 60rpx;
		text-align: right;
		float: right;
		padding-left: 20rpx;
	}

	// 快捷标签
	.shortcut-title {
		height: 50rpx;
		font-size: $uni-font-size-base;
		opacity: .6;
		align-items: center;
	}

	.shortcut-list {
		flex-wrap: wrap;
	}

	.shortcut-item {
		font-size: $uni-font-size-sm;
		border: 2rpx solid rgba($color: #000000, $alpha: 0.1);
		border-radius: 10rpx;
		padding: 5rpx 20rpx;
		margin: 20rpx 20rpx 0 0;
	}
</style>
